<template>
  <van-tabbar route v-model="active" active-color="#3A9DFD" inactive-color="#697A8B">
    <van-tabbar-item v-for="(item,index) in tabs" :key="index" replace :to=item.to>
      <span>{{item.title}}</span>
      <template #icon="props">
        <img :src="props.active ? item.active : item.inactive" />
      </template>
    </van-tabbar-item>
  </van-tabbar>

</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
name: "vantTabbar",
  data(){
  return{
    active: 0,
    tabs:[
      {title:"首页",to:"/home",inactive:require("@/assets/img/tabbar/home.png"),active:require("@/assets/img/tabbar/home_act.png")},
      {title:"权益超市",to:"/market",inactive:require("@/assets/img/tabbar/market.png"),active:require("@/assets/img/tabbar/market_act.png")},
      {title:"移动厅",to:"/hall",inactive:require("@/assets/img/tabbar/hall.png"),active:require("@/assets/img/tabbar/hall_act.png")},
      {title:"附近",to:"/near",inactive:require("@/assets/img/tabbar/near.png"),active:require("@/assets/img/tabbar/near_act.png")},
      {title:"我的",to:"/my",inactive:require("@/assets/img/tabbar/my.png"),active:require("@/assets/img/tabbar/my_act.png")},
    ],
    icon: {
      active: 'https://img.yzcdn.cn/vant/user-active.png',
      inactive: 'https://img.yzcdn.cn/vant/user-inactive.png',
    },
  }
  }
}
</script>

<style scoped>

</style>